<template>
    <view class="register">
        <view class="formInfo">
            <u-form :model="info" ref="uForm" label-position="top">
                <u-form-item label="手机号:" prop="phone" required>
                    <u-input v-model="info.phone" />
                </u-form-item>
                <u-form-item label="用户名:" prop="userName" required>
                    <u-input v-model="info.userName" />
                </u-form-item>
                <u-form-item label="密码:" prop="pwd" required>
                    <u-input type="password" v-model="info.pwd" />
                </u-form-item>
                <u-form-item label="确认密码:" prop="repwd" required>
                    <u-input  type="password" v-model="info.repwd" />
                </u-form-item>
                <u-form-item label="验证码:" prop="captcha" required>
                    <u-input v-model="info.captcha" />
                    <!-- <template #right>
                        <u-button v-if="getCaptchaStatus" size="mini" @click="getCaptcha">获取验证码</u-button>
                        <u-button v-else size="mini" type="primary" @click="getCaptcha" >{{minutesWait > 0 ? `${minutesWait}后` : ''}}重新获取</u-button>
                        <view>萨达</view>
                    </template> -->
                    <view class="captcha">
                      <u-button v-if="getCaptchaStatus" size="mini" @click="getCaptcha">获取验证码</u-button>
                      <u-button v-else size="mini" type="primary" @click="getCaptcha" >{{minutesWait > 0 ? `${minutesWait}后` : ''}}重新获取</u-button>
                    </view>
                </u-form-item>
            </u-form>
        </view>
        <view class="submitCtrol">
            <button class="register-btn" type="primary" @click="submit()">注册</button>
        </view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    import api from '@/common/api.js';
    import {successToast} from '@/common/global.js'
    export default {
        data() {
            return {
                pwdShow: false,
                minutesWait: 0, // 一分钟倒计时
                info: {
                    userName: '', // 用户名
                    pwd: '', // 密码
                    repwd: '', // 确认密码
                    phone: '', // 手机号
                    captcha: '' // 验证码
                },
                rules: {
                    phone: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: ['change', 'blur']
                    }, {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            // 上面有说，返回true表示校验通过，返回false表示不通过
                            // this.$u.test.mobile()就是返回true或者false的
                            return this.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        // 触发器可以同时用blur和change
                        trigger: ['change', 'blur']
                    }],
                    userName: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: ['change', 'blur']
                    }],
                    pwd: [{
                        required: true,
                        message: '请输入密码',
                        trigger: ['change', 'blur']
                    },{
                        min: 6,
                        max: 16,
                        message: '密码长度不符合',
                        trigger: ['change', 'blur']
                    }],
                    repwd: [{
                        required: true,
                        message: '请输入确认密码',
                        trigger: ['change', 'blur']
                    },
                    {
                        min: 6,
                        max: 16,
                        message: '密码长度不符合',
                        trigger: ['change', 'blur']
                    },
                    {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            // 上面有说，返回true表示校验通过，返回false表示不通过
                            // this.$u.test.mobile()就是返回true或者false的
                            return value === this.info.pwd;
                        },
                        message: '两次密码不一致',
                        // 触发器可以同时用blur和change
                        trigger: ['change', 'blur']
                    }]
                },
                minuesTimer: null, // 一分钟倒计时定时器
                getCaptchaStatus: true
            }
        },
        methods: {
            /**
             * 规则校验
             * */
            submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        console.log('验证通过');
                        this.registerReq(res => {
                            uni.showToast({
                                title: res.msg
                            })
                            if(res.status === 0) {
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url: '/pages/login/login'
                                    })
                                }, 1000)
                            }
                        })
                    } else {
                        console.log('验证失败');
                    }
                });
            },
            /**
             * 注册请求
             * */
            registerReq(cb) {
                let user = this.info;
                let params = {
                    phone: user.phone,
                    userName: user.userName,
                    password: user.pwd,
                    verifiCode: user.captcha
                }
                api.register(params, res => {
                    cb && cb(res.data)
                })
            },
            /**
             * 短信验证码请求
             * */
            smsReq(cb) {
                let params = {
                    phone: this.info.phone
                }
                api.getSms(params, res => {
                    successToast(res.data.msg);
                })
            },
            /**
             * 获取短信验证码
             * */
            getCaptcha() {
                if(this.info.phone === '' || this.info.phone.length != 11) {
                  this.$refs.uToast.show({
                      title: `请输入正确的手机号`,
                      type: 'default',
                      duration: 1000
                  })
                  return;
                }
                if(this.minutesWait > 0) {
                    this.$refs.uToast.show({
                        title: `请在${this.minutesWait}后再次发送`,
                        type: 'default',
                        duration: 1000
                    })
                    return;
                }
                this.smsReq();
                this.minutesWait = 59;
                this.getCaptchaStatus = false;
                this.minuesTimer = setInterval(() => {
                    this.minutesWait--;
                    if(this.minutesWait <= 0) {
                        this.minutesWait = 0;
                        clearInterval(this.minuesTimer);
                    }
                }, 1000)
            }
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        mounted() {

        }
    }
</script>

<style lang="less" scoped>
    .register {
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        .formInfo {
            padding: 15rpx 15rpx 15rpx 25rpx;
        }
        .submitCtrol {
            padding: 0 30rpx;
            margin-top: 150rpx;
        }
    }
</style>
